<template>
	<view class="contanier">
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" plain="true">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view class="wx-inputs">
			<view class="wx-title">
				昵称
			</view>
			<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nick_name" @focus="onfocus" />
		</view>
		<button class="wxlogin-btn" @click="wxLogins">授权</button>
	</view>
</template>

<script>
	import {
		UserInfoSave
	} from '../../api/login.js'
	export default {
		data() {
			return {
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				addr: "",
				nick_name: ""
			}
		},
		created() {},
		methods: {
			async onChooseAvatar(e) {
				console.log(e, '---37---')
				// const {
				// 	avatarUrl
				// } = e.detail
				// this.avatarUrl = avatarUrl
				const result = await this.uploadFilePromise(e.detail.avatarUrl)
				console.log(result, '---43---')
				this.avatarUrl = result[0].name
			},
			onfocus(e) {
				console.log(e)
				this.nick_name = e.detail.value
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://jiazheng.huidn.com/api/upload/image', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'Authori-zation': 'Bearer ' + uni.getStorageSync('Token')
						},
						success: (res) => {
							setTimeout(() => {
								console.log(res)
								resolve(JSON.parse(res.data).images)
							}, 1000)
						}
					});
				})
			},
			async wxLogins() {
				console.log(this.avatarUrl)
				const
					data = await UserInfoSave({
						avatar: this.avatarUrl,
						nick_name: this.nick_name,
					})
				console.log(data)
				if (data.status == 200) {
					uni.showToast({
						title: data.msg
					})
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contanier {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

		.wxlogin-btn {
			width: 370rpx;
			height: 92rpx;
			background: linear-gradient(90deg, #04B364 0%, #15B66E 100%);
			border-radius: 12rpx;
			margin-top: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}

		.wx-inputs {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			width: 100%;
			margin-left: 32rpx;
			margin-right: 32rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #E9E9E9;

			.wx-title {
				width: 100rpx;
				height: 92rpx;
				display: flex;
				align-items: center;
			}

			.weui-input {
				flex: 1;
				height: 92rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				// border: 2rpx solid #E9E9E9;

				padding-left: 10rpx;
			}
		}



		.avatar-wrapper {
			display: flex;
			justify-content: center;
			background-color: #fff;
			border: transparent;
			height: 200rpx;
			align-items: center;
			width: 100%;

			.avatar {
				width: 140rpx;
				height: 140rpx;
			}



		}
	}
</style>